<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Canvas</title>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Microsoft Yahei', 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        h1, p {
            text-align: center;
            margin-bottom: 30px;
        }
        .actions {
            text-align: center;
        }
        .actions button {
            margin: 5px;
        }
        .container {
            width: 1100px;
            min-height: 600px;
            margin: 0 auto;
            background: aliceblue;
        }
        .container canvas, .container .tracer {
            float: left;
        }
        .container .tracer {
            height: 550px;
            width: 540px;
            background: beige;
        }
    </style>
</head>
<body>
    <h1>测试 css3 对Canvas的重渲染影响</h1>
    <p>先打开chrome 开发工具，点击右上角的 三个点图标，选择 More Tools -> Rendering，在弹出的tab勾选 Paint flashing 和 FPS meter 可以看到重渲染情况, 会出现绿色框的就是重渲染的部分</p>
    <div class="actions">
        <button id="ch-bg">修改背景色</button>
        <button id="ch-size">修改大小</button>
        <button id="ch-opacity">opacity 渐变</button>
        <button id="ch-animate">animate</button>
        <button id="ch-canvas">修改canvas的字</button>

        
    </div>
    <div class="container">
        <canvas id="canvas" width="550" height="550"></canvas>
        <div class="tracer">
            这里是 div 容器
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(() => {
            var $tracer =$('.tracer')
            var canvas = $('#canvas').get(0);
            var ctx = canvas.getContext('2d');
            var randomColor = function(color){
                return (color += '0123456789abcdef'[Math.floor(Math.random()*16)]) &&
                    (color.length == 6) ? color : arguments.callee(color)
            }
            $('#ch-bg').on('click', function(e) {
                $tracer.css('background', '#' + randomColor(''))
            })
            $('#ch-size').on('click', function(e) {
                $tracer.width($tracer.width() + 5)
            })
            $('#ch-opacity').on('click', function(e) {
                $tracer.css('opacity', 0.5)
                // $tracer.fadeToggle()
            })
            var animateIndex = 0
            $('#ch-animate').on('click', function(e) {
                var animateClass = ['bounce', 'swing', 'pulse', 'rubberBand', 'flipOutX', 'flipOutY', 'lightSpeedIn', 'lightSpeedOut' , 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft' , 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight' , 'rotateOutUpLeft', 'rotateOutUpRight', 'hinge', 'jackInTheBox' , 'rollIn', 'rollOut', 'zoomIn', 'zoomInDown' , 'zoomInLeft', 'zoomInRight', 'zoomInUp', 'zoomOut' , 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp' , 'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp' , 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp']
                $tracer.removeClass(animateClass).addClass('animated').addClass(animateClass[animateIndex % animateClass.length])
                animateIndex++
                
            })
            $('#ch-canvas').on('click', function(e) {
                ctx.clearRect(100, 100, 300, 300);
                ctx.fillText('这里是 canvas' + Math.random(), 200, 200);
            })
            

            
            ctx.clearRect(0, 0, 550, 550);
            ctx.fillText('这里是 canvas', 200, 200);

        })
    </script>
</body>
</html>